import $ from 'jquery';
import Swiper from 'swiper';
import 'swiper/swiper-bundle.css';
import 'jquery-modal';
import 'jquery-modal/jquery.modal.css';
import "./main.less";

class Main {
  constructor() {
    this.init();
  }

  init() {
    this.initEvent();
    this.initWorksListSwiper();
    this.initFooterImgFixed();
    this.initEvalutionsListSwiper();
  }

  initEvent() {
    $('#submit-btn').on('click', (event) => this.submitUserInfo(event));
    $('.js-open-modal').on('click', (event) => this.openLoginModal(event));
    $('#modal-submit-btn').on('click', (event) => this.submit(event));
  }

  submitUserInfo(event) {
    const name = $('#name').val();
    const telephone = $('#telephone').val();

    this.submitSuccess();
    // $.post('xxx', { name, telephone})
    //   .then(response => {
    //     console.log('提交成功')
    //   })
  }

  initWorksListSwiper() {
    const $lists = $('#works-list');
    const swiper = new Swiper('#works-list .swiper-container', {
      slidesPerView: 3,
      spaceBetween: 10,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });

    $lists.on('click', '.swiper-button-next', () => swiper.slideNext());
    $lists.on('click', '.swiper-button-prev', () => swiper.slidePrev());
  }

  initEvalutionsListSwiper() {
    const $lists = $('#evalutions-list');
    const swiper = new Swiper('#evalutions-list .swiper-container', {
      slidesPerView: 4,
      spaceBetween: 20,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });

    $lists.on('click', '.swiper-button-next', () => swiper.slideNext());
    $lists.on('click', '.swiper-button-prev', () => swiper.slidePrev());
  }

  initFooterImgFixed() {
    const $footerImg = $('.js-footer-img');
    const $openModal = $('.js-open-modal');
    if (window.scrollY > 0 && !$footerImg.hasClass('fixed')) {
      $footerImg.addClass('fixed')
      $openModal.removeClass('hidden')
    } else if (window.scrollY === 0) {
      $footerImg.removeClass('fixed');
      $openModal.addClass('hidden')
    }
    $(window).on('scroll', function() {
      if (window.scrollY > 0 && !$footerImg.hasClass('fixed')) {
        $footerImg.addClass('fixed')
        $openModal.removeClass('hidden')
      } else if (window.scrollY === 0) {
        $footerImg.removeClass('fixed');
        $openModal.addClass('hidden')
      }
    })
  }

  openLoginModal() {
    $('#modal-login-form').modal();
  }

  submit() {
    this.submitSuccess();
  }

  submitSuccess() {
    $('#submit-success').modal({
      showClose: false,
    });
    setTimeout(() => {
      $.modal.close();
    }, 5000);
  }
}

new Main();
